<template>
  <div>
    <el-dialog :title="isedit? '更新部门' : '新增部门'" :visible="dialogFormVisible" :modal-append-to-body="false" width="40%" @close="close">
      <el-form ref="ruleFormsdfs" :model="form" :rules="rules">
        <el-form-item label="部门名称" label-width="150px" prop="name">
          <el-input v-model="form.name" placeholder="2-10个字符" style="width: 400px" />
        </el-form-item>
        <el-form-item label="部门编码" label-width="150px" prop="code">
          <el-input v-model="form.code" placeholder="2-10个字符" style="width: 400px" />
        </el-form-item>
        <el-form-item label="部门负责人" label-width="150px" prop="managerId">
          <el-select v-model="form.managerId" placeholder="请选择部门负责人" style="width: 400px">
            <!-- <el-option label="区域一" value="shanghai" /> -->
            <el-option v-for="item in myLead" :key="item.id" :label="item.username" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" label-width="150px" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" placeholder="1-100个字符" style="width: 400px" />
        </el-form-item>
        <el-form-item>
          <el-form-item label-width="150px">
            <el-button type="primary" @click="submitForm">{{ isedit? '更新' : '新增' }}</el-button>
            <el-button @click="close">取 消</el-button>
          </el-form-item>
        </el-form-item></el-form>
    </el-dialog>
  </div>
</template>

<script>
// 导入封装的接口
import { getSysUserRequest, setCompanyRequest, GetCompanyRequest, updataCompanyRequest } from '@/api/department.js'
// 导入lodash库
import cloneDeep from 'lodash'
export default {
  name: 'AddEditDiomo',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    departmentList: {
      type: Array,
      default: () => []
    },
    curretId: {
      type: [String, Number],
      default: ''
    },
    isedit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatorName = (rule, value, callback) => {
      let res = cloneDeep(this.departmentList)
      if (this.isedit) {
        res = res.filter(item => item.id !== this.curretId)
      }

      if (res.some(item => item.name === value)) {
        callback(new Error('部门名称重复'))
      } else {
        callback()
      }
    }
    const validatorCode = (rule, value, callback) => {
      let res = cloneDeep(this.departmentList)
      if (this.isedit) {
        res = res.filter(item => item.id !== this.curretId)
      }

      if (res.some(item => item.code === value)) {
        callback(new Error('部门名称重复'))
      } else {
        callback()
      }
    }
    return {
      myLead: [],
      form: {
        name: '',
        code: '',
        managerId: '',
        introduce: '',
        pid: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 2, max: 10, message: '部门名称位数在2-10位', trigger: 'blur' },
          { 'validator': validatorName, trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 2, max: 10, message: '部门编码位数在2-10位', trigger: 'blur' },
          { 'validator': validatorCode, trigger: 'change' }
        ],
        managerId: [
          { required: true, message: '请选择部门负责人', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 100, message: '部门介绍位数在1-100位', trigger: 'blur' }
        ]
      }
    }
  },
  // 侦听器
  watch: {
    isedit(newval, oldval) {
      if (newval) {
        // console.log(1)
        this.GetCompany()
      }
    }
  },
  // created钩子
  created() {
    this.getSysUser()
  },
  methods: {
    // element组件内置方法
    close() {
      // 传递关闭对话和开启
      this.$emit('update:dialog-form-visible', false)
      // 传递侦听器重置为false,避免两次点击数据不回显的问题
      this.$emit('update:isedit', false)
      // 关闭清空数据
      this.$refs.ruleFormsdfs.resetFields()
      // form数据结构还原
      this.form = this.$options.data().form
    },
    // 封装一个发送负责人接口方法
    async  getSysUser() {
      const data = await getSysUserRequest()
      this.myLead = data.data
    },
    // 点击确定,表单校验
    submitForm() {
      this.$refs.ruleFormsdfs.validate(async valid => {
        if (valid) {
          // 校验成功发生ajax
          if (this.isedit) {
            await updataCompanyRequest(this.form)
          } else {
            await setCompanyRequest({ ...this.form, pid: this.curretId })
          }
          this.close()
          this.$message({
            message: `${this.isedit ? '编辑' : '添加'}成功`,
            type: 'success'
          })
          // 通知父组件渲染完毕,重新渲染页面
          this.$emit('add-success')
        }
      })
    },
    // 封装获取部门详细函数
    async GetCompany() {
      const data = await GetCompanyRequest(this.curretId)
      this.form = data.data
    }
  }

}
</script>

<style>

</style>
